<template>
  <div class="type-header">
    {{ articleType.name  }}
  </div>
  <div class="type-article">
    <ArticleCard v-for="item in articleType.articles" :key="item.id" :article="item"></ArticleCard>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ArticleCard from '@/components/ArticleCard.vue';

const articleType = ref({});
const props = defineProps({
  articleTypeId: {
    type: Number,
    default: 0,
  },
});

const getArticlelist = function(typeId) {
  console.log(typeId);
  const type = {
    name: 'Java',
    count: 10,
    articles: [
      {
        id: 1,
        title: 'Sample Article Title',
        content: 'This is a sample article content. It provides a brief overview of the article.',
        imageUrl: 'https://zhboom-tanhua.oss-cn-shenzhen.aliyuncs.com/images/2021/10/07/94ee3caa-ae97-4758-88fa-43fe5fd68b11.jpg',
        tags: ['Java', 'C++'],
        update_date: '2023-05-01'
      },
      {
        id: 2,
        title: 'Another Article Title',
        content: 'This is another sample article content. It provides a brief overview of the article.',
        imageUrl: 'https://zhboom-tanhua.oss-cn-shenzhen.aliyuncs.com/images/2021/10/07/94ee3caa-ae97-4758-88fa-43fe5fd68b11.jpg',
        tags: ['Linux', 'Centos', 'shell'],
        update_date: '2023-05-02'
      },
      {
        id: 3,
        title: 'More Articles',
        content: 'This is more sample article content. It provides a brief overview of the article.',
        imageUrl: 'https://zhboom-tanhua.oss-cn-shenzhen.aliyuncs.com/images/2021/10/07/94ee3caa-ae97-4758-88fa-43fe5fd68b11.jpg',
        tags: ['Javascript', 'css', 'html'],
        update_date: '2023-05-03'
      },
      {
        id: 4,
        title: 'Last Article Title',
        content: 'This is the last sample article content. It provides a brief overview of the article.',
        imageUrl: 'https://zhboom-tanhua.oss-cn-shenzhen.aliyuncs.com/images/2021/10/07/94ee3caa-ae97-4758-88fa-43fe5fd68b11.jpg',
        tags: ['Python'],
        update_date: '2023-05-04'
      }
    ]
  }
  return type;
}

onMounted(() => {
  articleType.value = getArticlelist(props.articleTypeId);
})
</script>

<style scoped>
.type-header {
  margin: 20px 0;
  padding: 10px;
  border: 1px sloid #888;
}
</style>
